<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>试题</title>
		<link rel="stylesheet" type="text/css" href="css/item.css" />
	</head>
	<body>
		<div id="app">
			<div>试卷名称/课程名称 <span>{{parseInt(index)+1}} / {{ques.length}}</span></div>
			<div class="line"></div>
			<div v-for="(items,key) in ques" :key="key">
				<div v-if="items.type == 1" v-show="key == index">
					<single-select :number="key+1" :ques="items" @getans="setans">
					</single-select>
				</div>
				<div v-if="items.type == 2" v-show="key == index">
					<mul-select :number="key+1" :ques="items" @getans="setans"></mul-select>
				</div>
				<div v-if="items.type == 3" v-show="key == index">
					<tian-kong :number="key+1" :ques="items" @getans="setans"></tian-kong>
				</div>
				<div v-if="items.type == 4" v-show="key == index">
					<simple-answer :number="key+1" :ques="items" @getans="setans">
					</simple-answer>
				</div>
			</div>

			<div class="btm">
				<button class="upone" v-show="index != 0" @click="upOne">上一题</button>
				<button class="next" v-show="index<(ques.length-1)" @click="nextOne">下一题</button>
				<button class="next" v-show="index == (ques.length-1)" @click="submit">提交</button>
			</div>
		</div>
	</body>
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/singleSelect.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/mulSelect.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/completion.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/simpleAnswer.js" type="text/javascript" charset="utf-8"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				index: 0,     //取试题集下标作为做题进度
				ques: [],     //从接口获取到的试题集
                myAnswer: {}, //用户的答案
			},
			mounted() {
				// 从接口获取试题
			},
			methods: {
				setans: function(e) {
                    // 监听子组件用户的答案，并赋值给父组件做保存
					this.myAnswer[e.id] = e.myAns;
					console.log(e)
				},
				upOne: function() {
					let i = parseInt(this.index);
					if (i > 0) {
						this.index = i - 1;
					} else {
						alert('已经是第一题了');
					}
				},
				nextOne: function() {
					let i = parseInt(this.index);
					let id = this.ques[i].id;
					if (!!this.myAnswer[id]) {
						if (i < (this.ques.length - 1)) {
							this.index = i + 1;
						}
					} else {
						alert('请完成本题');
					}
				},
				submit: function() {
					if(this.ques.length > Object.keys(this.myAnswer).length){
						alert('请完成全部试题');
					}else{
						// 提交
						let sendData = {
							'id': '试题对应的id',
							'uid': '做题人id',
							'my_answer': JSON.stringify(this.myAnswer)
						}
						console.log(sendData)
					}
				}
			}
		})
	</script>
</html>
